<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://jsquare.org/jsquare/jsquare.js"></script>
    <script type="text/javascript" src="http://jsquare.org/jsquare/jsquare.gl.js"></script>
    <script type="text/javascript">

    var sample={
        innerCircle:{
            r:30,
            pen : {r:255,g:100,b:255},
            brush : {r:200,g:200,b:255},
            text : '25일',
            style:'width:100%;height:100%;text-align:center;vertical-align:middle;font-size:20px;font-weight:600;color:red;'
        },
        //outer circle
        pen : {r:255,g:0,b:255},
        brush : {r:255,g:255,b:100},
        hour_size:30,   // 시간 표시 텍스트 영역
        hour_style:'font-size:15px;font-weight:600;', // 시간 텍스트 스타일
        content_style:'font-size:15px;font-weight:400;', // 시간표 텍스트 스타일
        schedule : [
           [22,00,06,30,'수면'],
           [06,30,07,30,'아침식사'],
           [07,30,08,00,'세면'],
           [08,00,09,30,'출근'],
           [09,30,11,40,'오전 근무'],
           [11,40,13,10,'운동'],
           [13,10,18,30,'오후 근무'],
           [18,30,20,00,'퇴근'],
           [20,00,22,00,'TV시청']
        ]
    };
    
    var drawTimepot=function(option,element) {
        var width=element.offsetWidth;
        var height=element.offsetHeight;
        var cx=width/2;
        var cy=height/2;
        
        var gl=new jsq.gl(element);
        // draw outer Circle
        // 텍트스 영역은 25px
        var pen=new jsq.gl.Pen(option.pen.r,option.pen.g,option.pen.b);
        var brush=new jsq.gl.Brush(option.brush.r,option.brush.g,option.brush.b);
        gl.setPen(pen);
        gl.setBrush(brush);
        gl.fillEllipse(option.hour_size,option.hour_size,width-option.hour_size*2,height-option.hour_size*2);
        
        // draw inner Circle
        var pen=new jsq.gl.Pen(option.innerCircle.pen.r,option.innerCircle.pen.g,option.innerCircle.pen.b);
        var brush=new jsq.gl.Brush(option.innerCircle.brush.r,option.innerCircle.brush.g,option.innerCircle.brush.b);
        gl.setPen(pen);
        gl.setBrush(brush);
        gl.fillEllipse(cx-option.innerCircle.r,cy-option.innerCircle.r,option.innerCircle.r*2,option.innerCircle.r*2);
        // draw inner Text
        gl.drawText(cx-option.innerCircle.r,cy-option.innerCircle.r,option.innerCircle.r*2,option.innerCircle.r*2,option.innerCircle.text,option.innerCircle.style);
        // draw time
        // am
        for(var i=1;i<=12;i++) {
            var deg=i*15-90;
            var r=cx-option.hour_size/2;
            var x=cx+Math.cos(deg*(Math.PI/180))*r;
            var y=cy+Math.sin(deg*(Math.PI/180))*r;
            gl.drawText(x,y,option.hour_size,option.hour_size,i,option.hour_style);
        }
        // pm
        for(var i=1;i<=12;i++) {
            var deg=i*15+90;
            var r=cx-option.hour_size/2;
            var x=cx+Math.cos(deg*(Math.PI/180))*r;
            var y=cy+Math.sin(deg*(Math.PI/180))*r;
            gl.drawText(x,y,option.hour_size,option.hour_size,i,option.hour_style);
        }
        // draw schedule
        for(var i=0;i<option.schedule.length;i++) {
            var sched=option.schedule[i];
            if (sched[0]>sched[2]) sched[0]-=24;
            var stdeg=sched[0]*15+sched[1]*0.25-90;
            var sx=cx+Math.cos(stdeg*(Math.PI/180))*option.innerCircle.r;
            var sy=cy+Math.sin(stdeg*(Math.PI/180))*option.innerCircle.r;
            var ex=cx+Math.cos(stdeg*(Math.PI/180))*(cx-option.hour_size);
            var ey=cy+Math.sin(stdeg*(Math.PI/180))*(cy-option.hour_size);
            gl.line(sx,sy,ex,ey);
            
            var eddeg=sched[2]*15+sched[3]*0.25-90;
            var sx=cx+Math.cos(eddeg*(Math.PI/180))*option.innerCircle.r;
            var sy=cy+Math.sin(eddeg*(Math.PI/180))*option.innerCircle.r;
            var ex=cx+Math.cos(eddeg*(Math.PI/180))*(cx-option.hour_size);
            var ey=cy+Math.sin(eddeg*(Math.PI/180))*(cy-option.hour_size);
            gl.line(sx,sy,ex,ey);

            var content=sched[4];
            var deg=stdeg+(eddeg-stdeg)/2;
            var x=cx+Math.cos(deg*(Math.PI/180))*((cx-option.hour_size)/2+option.innerCircle.r);
            var y=cy+Math.sin(deg*(Math.PI/180))*((cy-option.hour_size)/2+option.innerCircle.r);
            gl.drawText(x,y,cx,cy,content,content.content_style);
        }
    };


      function main(){
/*        var gl=new jsq.gl(document.getElementById('canvas'));
            var brush=new jsq.gl.Brush(255,0,255);
            var pen=new jsq.gl.Pen(255,0,0);
            gl.setBrush(brush);
            gl.setPen(pen);
           gl.line(10,10,250,250);
           gl.lineTo(50,450);
           gl.rect(50,50,300,400);
           gl.roundRect(50,50,300,400,10);
           gl.fillRect(100,100,200,200);
           gl.lineTo(500,500);
           gl.fillArc(50,50,300,400,0,270);
           gl.ellipse(50,50,300,400);
           gl.curve(50,50,350,450,100,0,500,500);
           gl.line(50,50,100,0);
           gl.line(350,450,500,500);
           gl.fillPolygon([ [10,10],[50,50],[10,150], [100,450] ]);
*/
        drawTimepot(sample,document.getElementById('canvas'));
      }
      
      window.onload=main;

    </script>
	</head>
	<body>

<div id="canvas" style="position:absolute;left:100px;top:100px;border:1px solid blue;width:500px;height:500px;"></div>
<!--canvas id="canvas" width="100%" height="100%" style="border:1px solid blue;background:none;">
</canvas-->
	</body>
</html>
